<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Foo</title>
  <link href="http://example.com/foo" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Foo</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Testing IDL markup and linking.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-barenum"><code><c- g>BarEnum</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="BarEnum" data-dfn-type="enum-value" data-export id="dom-barenum"><code><c- s>""</c-></code><a class="self-link" href="#dom-barenum"></a></dfn>, <dfn class="idl-code" data-dfn-for="BarEnum" data-dfn-type="enum-value" data-export id="dom-barenum-bar"><code><c- s>"bar"</c-></code><a class="self-link" href="#dom-barenum-bar"></a></dfn> };
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="foo"><code><c- g>Foo</c-></code></dfn> {
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Foo" data-dfn-type="attribute" data-export data-type="DOMString" id="dom-foo-foo"><code><c- g>foo</c-></code></dfn>;
 <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-barenum" id="ref-for-enumdef-barenum"><c- n>BarEnum</c-></a> <dfn class="idl-code" data-dfn-for="Foo" data-dfn-type="attribute" data-export data-type="BarEnum" id="dom-foo-bar"><code><c- g>bar</c-></code><a class="self-link" href="#dom-foo-bar"></a></dfn>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Foo" data-dfn-type="attribute" data-export data-lt="or" data-type="DOMString" id="dom-foo-or"><code><c- g>_or</c-></code></dfn>;
  <c- b>Promise</c->&lt;<c- b>any</c->> <dfn class="dfn-paneled idl-code" data-dfn-for="Foo" data-dfn-type="method" data-export data-lt="get(a)" id="dom-foo-get"><code><c- g>get</c-></code></dfn>(<a class="n" data-link-type="idl-name"><c- n>int</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-foo-get-a-a" id="ref-for-dom-foo-get-a-a"><c- g>a</c-></a>);
};
</pre>
   <table class="argumentdef data">
    <caption>Arguments for the <a class="idl-code" data-link-type="method" href="#dom-foo-get" id="ref-for-dom-foo-get">Foo.get(a)</a> method.</caption>
    <thead>
     <tr>
      <th>Parameter 
      <th>Type 
      <th>Nullable 
      <th>Optional 
      <th>Description 
    <tbody>
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="Foo/get(a)" data-dfn-type="argument" data-export id="dom-foo-get-a-a"><code>a</code></dfn> 
      <td> int 
      <td> <span class="no">✘</span>
      <td> <span class="no">✘</span>
      <td>An argument.
   </table>
   <p><code class="idl"><a data-link-type="idl" href="#foo" id="ref-for-foo">Foo</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-foo-foo" id="ref-for-dom-foo-foo">foo</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-foo-or" id="ref-for-dom-foo-or">or</a></code>, <code class="idl"><a data-link-type="idl">_or</a></code></p>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span></h3>
  <ul class="index">
   <li><a href="#dom-barenum">""</a><span>, in §Unnumbered section</span>
   <li><a href="#dom-foo-bar">bar</a><span>, in §Unnumbered section</span>
   <li><a href="#dom-barenum-bar">"bar"</a><span>, in §Unnumbered section</span>
   <li><a href="#enumdef-barenum">BarEnum</a><span>, in §Unnumbered section</span>
   <li><a href="#dom-foo-foo">foo</a><span>, in §Unnumbered section</span>
   <li><a href="#foo">Foo</a><span>, in §Unnumbered section</span>
   <li><a href="#dom-foo-get">get(a)</a><span>, in §Unnumbered section</span>
   <li><a href="#dom-foo-or">or</a><span>, in §Unnumbered section</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">Unnamed section</a> <a href="#ref-for-idl-DOMString①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span></h3>
  <dl>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span></h2>
<pre class="idl highlight def"><c- b>enum</c-> <a href="#enumdef-barenum"><code><c- g>BarEnum</c-></code></a> { <a href="#dom-barenum"><code><c- s>""</c-></code></a>, <a href="#dom-barenum-bar"><code><c- s>"bar"</c-></code></a> };
<c- b>interface</c-> <a href="#foo"><code><c- g>Foo</c-></code></a> {
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a data-type="DOMString" href="#dom-foo-foo"><code><c- g>foo</c-></code></a>;
 <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-barenum" id="ref-for-enumdef-barenum①"><c- n>BarEnum</c-></a> <a data-type="BarEnum" href="#dom-foo-bar"><code><c- g>bar</c-></code></a>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a data-type="DOMString" href="#dom-foo-or"><code><c- g>_or</c-></code></a>;
  <c- b>Promise</c->&lt;<c- b>any</c->> <a href="#dom-foo-get"><code><c- g>get</c-></code></a>(<a class="n" data-link-type="idl-name"><c- n>int</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-foo-get-a-a" id="ref-for-dom-foo-get-a-a①"><c- g>a</c-></a>);
};

</pre>
  <aside class="dfn-panel" data-for="enumdef-barenum">
   <b><a href="#enumdef-barenum">#enumdef-barenum</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-barenum">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="foo">
   <b><a href="#foo">#foo</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-foo">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-foo-foo">
   <b><a href="#dom-foo-foo">#dom-foo-foo</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-foo-foo">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-foo-or">
   <b><a href="#dom-foo-or">#dom-foo-or</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-foo-or">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-foo-get">
   <b><a href="#dom-foo-get">#dom-foo-get</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-foo-get">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-foo-get-a-a">
   <b><a href="#dom-foo-get-a-a">#dom-foo-get-a-a</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-foo-get-a-a">Unnamed section</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>